<template>
  <!-- 投资者 -->
  <div>
    <div class="servicePc" v-loading.fullscreen.lock="loading">
      <title-line :title="nav?.[0]?.name" />
      <div class="explain">
        <!-- <div v-html="data?.serviceContent?.content"></div> -->
        {{ data?.serviceContent?.content }}
      </div>
      <div class="tabs-box" v-if="status != 4">
        <div
          class="tabs"
          :class="item.value == currentTabs ? 'tabs-selected' : 'tabs'"
          v-for="item in tabs"
          :key="item"
          @click="tabClick(item)"
        >
          {{ item.label }}
        </div>
      </div>

      <div class="frame" v-if="currentTabs != 0">
        <el-form
          ref="refForm"
          :rules="formRules"
          :model="form"
          size="large"
          label-position="right"
          label-width="120px"
          v-if="currentTabs == 1"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="formData?.[0]?.name"
                prop="organizationName"
              >
                <el-input v-model="form.organizationName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[1]?.name" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[2]?.name" prop="position">
                <el-input v-model="form.position"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[3]?.name" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[4]?.name" prop="email">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[5]?.name" prop="time">
                <el-date-picker
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                  v-model="form.time"
                  placeholder="选择预约时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[6]?.name" prop="num">
                <el-input v-model="form.num"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData?.[7]?.name" prop="purpose">
                <el-input v-model="form.purpose"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item :label="formData?.[8]?.name" prop="content">
                <el-input
                  type="textarea"
                  v-model="form.content"
                  placeholder="请输入研内容"
                  :rows="4"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="验证码：" prop="code">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <verify-code @change="imgCode" ref="imgVerify" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="btn">
                <div class="submit" @click="submit">提交</div>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="company" v-if="currentTabs == 2">
          <div class="item">
            <div class="text">投资者服务热线：</div>
            <div class="value">{{ data?.serviceContent?.hotline }}</div>
          </div>
          <div class="item">
            <div class="text">投资者专用传真：</div>
            <div class="value">{{ data?.serviceContent?.fax }}</div>
          </div>
          <div class="item">
            <div class="text">投资者关系专用邮箱：</div>
            <div class="value">{{ data?.serviceContent?.mail }}</div>
          </div>
          <div class="item">
            <div class="text">总部地址：</div>
            <div class="value">{{ data?.serviceContent?.head_address }}</div>
          </div>
        </div>
      </div>
      <!-- 公告 -->
      <div class="notice-box">
        <title-line :title="nav?.[1]?.name" more="true" @more="noticeClick" />
        <div class="item" v-for="item in data?.Announcement" :key="item.id">
          <div class="left">
            <div class="block"></div>
            <div class="text">
              <div class="title">{{ item.name }}</div>
              <div class="date">
                公告时间 ：<span v-if="item.year">{{ item.year }}</span>
                <span v-if="item.month">-{{ item.month }}</span>
                <span v-if="item.day">-{{ item.day }}</span>
              </div>
            </div>
          </div>
          <div class="right" @click="detail(item)">点击预览</div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 报告 -->
      <div class="report-box">
        <title-line :title="nav?.[2]?.name" more="true" @more="reportClick" />
        <div class="list">
          <a
            :href="item.url || item.videofile"
            class="item"
            v-for="item in data?.Report"
            :key="item.id"
          >
            <img class="img" :src="item.webimages" />
            <div class="title">{{ item.name }}</div>
          </a>
        </div>
      </div>
    </div>

    <!-- 移动端 -->
    <div class="serviceMobile" v-loading.fullscreen.lock="loading">
      <div class="serviceMobile-section">
        <title-line :title="nav?.[0]?.name" />
        <div class="explain">
          <!-- <div v-html="data?.serviceContent?.content"></div> -->
          {{ data?.serviceContent?.content }}
        </div>
        <div class="tabs-box" v-if="status != 4">
          <div
            class="tabs"
            :class="item.value == currentTabs ? 'tabs-selected' : 'tabs'"
            v-for="item in tabs"
            :key="item"
            @click="tabClick(item)"
          >
            {{ item.label }}
          </div>
        </div>

        <div class="frame" v-if="currentTabs != 0">
          <el-form
            ref="refForm"
            :rules="formRules"
            :model="form"
            size="large"
            label-position="right"
            label-width="120px"
            v-if="currentTabs == 1"
          >
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item
                  :label="formData?.[0]?.name"
                  prop="organizationName"
                >
                  <el-input v-model="form.organizationName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[1]?.name" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[2]?.name" prop="position">
                  <el-input v-model="form.position"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[3]?.name" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[4]?.name" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[5]?.name" prop="time">
                  <el-date-picker
                    style="width: 100%"
                    value-format="YYYY-MM-DD"
                    v-model="form.time"
                    placeholder="选择预约时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[6]?.name" prop="num">
                  <el-input v-model="form.num"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="formData?.[7]?.name" prop="purpose">
                  <el-input v-model="form.purpose"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item :label="formData?.[8]?.name" prop="content">
                  <el-input
                    type="textarea"
                    v-model="form.content"
                    placeholder="请输入研内容"
                    :rows="4"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="验证码：" prop="code">
                  <el-input v-model="form.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item>
                  <verify-code @change="imgCode" ref="imgVerify" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div class="btn">
                  <div class="submit" @click="submit">提交</div>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div class="company" v-if="currentTabs == 2">
            <div class="item">
              <div class="text">投资者服务热线：</div>
              <div class="value">{{ data?.serviceContent?.hotline }}</div>
            </div>
            <div class="item">
              <div class="text">投资者专用传真：</div>
              <div class="value">{{ data?.serviceContent?.fax }}</div>
            </div>
            <div class="item">
              <div class="text">投资者关系专用邮箱：</div>
              <div class="value">{{ data?.serviceContent?.mail }}</div>
            </div>
            <div class="item">
              <div class="text">总部地址：</div>
              <div class="value">{{ data?.serviceContent?.head_address }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 公告 -->
      <div class="notice-box serviceMobile-section">
        <title-line :title="nav?.[1]?.name" more="true" @more="noticeClick" />
        <div class="item" v-for="item in data?.Announcement" :key="item.id">
          <div class="left">
            <div class="block"></div>
            <div class="text">
              <div class="title">{{ item.name }}</div>
              <div class="date">
                公告时间 ：<span v-if="item.year">{{ item.year }}</span>
                <span v-if="item.month">-{{ item.month }}</span>
                <span v-if="item.day">-{{ item.day }}</span>
              </div>
            </div>
          </div>
          <div class="right" @click="detail(item)">点击预览</div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 报告 -->
      <div class="report-box serviceMobile-section">
        <title-line :title="nav?.[2]?.name" more="true" @more="reportClick" />
        <div class="list">
          <a
            :href="item.url || item.videofile"
            class="item"
            v-for="item in data?.Report"
            :key="item.id"
          >
            <img class="img" :src="item.webimages" />
            <div class="title">{{ item.name }}</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VerifyCode from "../../../components/v-code.vue";
export default {
  components: { VerifyCode },
  data() {
    return {
      code: "",
      checkCode: "",
      loading: false,
      data: null,
      tabs: [
        { label: "预约现场调研", value: 1 },
        { label: "参观公司总部", value: 2 },
      ],
      formData: [],
      form: {
        name: "",
        organizationName: "",
        position: "",
        phone: "",
        email: "",
        time: "",
        num: "",
        purpose: "",
        code: "",
        content: "",
      },
      formRules: {
        name: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: "blur",
          },
        ],
        organizationName: [
          {
            required: true,
            message: "请输入机构名称",
            trigger: "blur",
          },
        ],
        position: [
          {
            required: true,
            message: "请输入联系人职称",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "请输入预约时间",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入来访人数",
            trigger: "blur",
          },
        ],
        purpose: [
          {
            required: true,
            message: "请输入调研目的",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入调研内容",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (this.code != value) {
                callback(new Error("验证码不正确"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      currentTabs: 0,
      nav: [],
      status: 1,
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    imgCode(code) {
      this.code = code;
    },

    /**
     * 获取列表数据
     */
    async getData() {
      try {
        this.nav = this.$utils.getNavChild("investors");
        const result = await this.$request.get(
          "/Investorservices/InvestorRelationsPage"
        );
        this.data = result.data;
        //获取现场调研表单label名称
        const formData = await this.$request.get("/Contactus/getFormTitle", {
          params: {
            type: 2, //1 商务合作 2现场调研
          },
        });

        this.formData = formData.data;
        //status是那两个按钮控制  1全部显示 2 只显示预约现场 3只显示参观公司
        this.status = this.data.serviceContent.status;
        this.tabs[0].label = this.data.serviceContent.pagetitle_4;
        this.tabs[1].label = this.data.serviceContent.pagetitle_5;
        switch (this.data.serviceContent.status) {
          case 3:
            this.tabs = [
              { label: this.data.serviceContent.pagetitle_5, value: 2 },
            ];
            break;

          case 2:
            this.tabs = [
              { label: this.data.serviceContent.pagetitle_4, value: 1 },
            ];
            break;
        }
        this.$emit("change", 0);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    /**
     * 表单提交
     */
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (valid) {
          try {
            // {
            //   name: this.form.organizationName, //机构名称
            //   contact_name: this.form.name, //联系人姓名
            //   job: this.form.position, //职位
            //   mobile: this.form.phone, //手机号
            //   email: this.form.email, //
            //   appointment: this.form.time, //预约时间
            //   personnum: this.form.num, //来访人数
            //   content: this.form.content,
            // }
            this.loading = true;
            let formData = new FormData();
            formData.append("name", this.form.organizationName);
            formData.append("contact_name", this.form.organizationName);
            formData.append("job", this.form.position);
            formData.append("mobile", this.form.phone);
            formData.append("email", this.form.email);
            formData.append("appointment", this.form.time);
            formData.append("purpose", this.form.purpose);
            formData.append("personnum", this.form.num);
            formData.append("content", this.form.content);
            await this.$request.post("/Formsub/Visit", formData);

            this.loading = false;
            this.$message.success("提交成功");
          } catch (e) {
            this.loading = false;
            this.$message.error(e.message);
          }
        }
      });
    },
    /**
     * 定期报告
     */
    reportClick() {
      this.$router.push({
        name: "investorsReport",
      });
    },

    /**
     * 公告个更多
     */
    noticeClick() {
      this.$router.push({
        name: "investorsNotice",
        query: { id: this.$route.query.id },
      });
    },

    /**
     * tabs 点击事件
     */
    tabClick(e) {
      this.currentTabs = e.value;
    },
    /**
     * 最新公告点击事件
     *
     */
    detail(e) {
      if (e.url) {
        window.open(e.url);
      } else if (e.videofile) {
        window.open(e.videofile, "_blank");
      } else {
        this.$router.push({
          name: "investorsDetail",
          query: {
            id: e.id,
          },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .serviceMobile {
    display: none;
  }

  .servicePc {
    margin-left: 36px;
    margin-right: 36px;

    display: flex;
    flex-direction: column;

    .explain {
      box-sizing: border-box;
      // overflow: hidden;
      margin-top: 30px;
      width: 800px;
      white-space: pre-wrap;
      font-size: 18px;
      color: #666666;
      line-height: 26px;
      // height: 94px;
      // font-size: 16px;
      //
      // font-weight: 500;
      // color: #666666;
      // line-height: 26px;
    }

    .tabs-box {
      cursor: pointer;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;

      .tabs {
        font-size: 20px;
        flex: 1;
        margin: 0 5px;
        height: 50px;
        background: #f7f7f7;

        font-weight: 400;
        color: #999999;
        border-radius: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }

      .tabs-selected {
        flex: 1;
        margin: 0 5px;
        height: 50px;
        background: #f7f7f7;
        border: 1px solid color.$base;
        color: color.$base;
        border-radius: 11px;
        font-weight: bold;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .frame {
      margin-top: 31px;
      box-sizing: border-box;
      padding: 26px 20px;
      width: 823px;

      background: #ffffff;
      border: 1px solid #eeeeee;
      border-radius: 8px;

      .company {
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        .item {
          display: flex;

          .text {
            white-space: nowrap;
            font-size: 16px;

            font-weight: 500;
            color: #999999;
            line-height: 30px;
          }

          .value {
            width: 600px;
            font-size: 16px;

            font-weight: 500;
            color: color.$base;
            line-height: 30px;
          }
        }
      }

      .btn {
        display: flex;
        justify-content: center;

        .submit {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 23px;
          width: 230px;
          height: 48px;
          background: color.$base;
          border-radius: 6px;
          color: #fff;

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }
    }

    .notice-box {
      margin-top: 40px;

      .item {
        position: relative;
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;

          .block {
            margin-top: 4px;

            width: 9px;
            height: 9px;
            background: #eb7803;
          }

          .text {
            margin-left: 10px;
            display: flex;
            flex-direction: column;

            .title {
              width: 600px;
              @include fn.title();
              line-height: 20px;
            }

            .date {
              margin-top: 12px;
              @include fn.describe();
              line-height: 20px;
            }
          }
        }

        .right {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          width: 90px;
          height: 35px;
          background: #f6f6f6;
          border-radius: 6px;
          font-size: 14px;

          font-weight: 400;
          color: #666666;
        }

        .line {
          position: absolute;
          bottom: 0;
          width: 820px;

          border: 1px dashed #efefef;
        }
      }
    }

    .report-box {
      margin-top: 50px;

      .list {
        margin-top: 27px;
        display: flex;
        // gap: 28px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 182px;
          margin: 12px;

          .img {
            width: 182px;
            height: 240px;
          }

          .title {
            margin-top: 18px;
            @include fn.title();
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .servicePc {
    display: none;
  }

  .serviceMobile {
    box-sizing: border-box;
    // margin-left: fn.rpx(36);
    // margin-right: fn.rpx(36);
    // padding: 0 fn.rpx(36);
    // padding-top: fn.rpx(30);
    display: flex;
    flex-direction: column;
    
    &-section {
      padding: fn.rpx(36);
      padding-top: fn.rpx(20);
      background-color: #fff;
      border-radius: fn.rpx(10);
    }

    .explain {
      overflow: hidden;
      margin-top: fn.rpx(20);
      width: fn.rpx(630);
      white-space: pre-wrap;
      font-size: fn.rpx(18);
      color: #666666;
      line-height: fn.rpx(32);
    }

    .tabs-box {
      margin-top: fn.rpx(30);
      display: flex;
      justify-content: space-between;
      width: 100%;

      .tabs {
        flex: 1;
        margin: 0 fn.rpx(10);
        font-size: fn.rpx(20);

        cursor: pointer;
        width: fn.rpx(300);
        height: fn.rpx(50);
        background: #f7f7f7;
        font-weight: bold;
        color: #999999;
        border-radius: fn.rpx(10);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #f7f7f7;
      }

      .tabs-selected {
        flex: 1;
        margin: 0 fn.rpx(10);
        cursor: pointer;
        width: fn.rpx(300);
        height: fn.rpx(50);
        background: #f7f7f7;
        border: 1px solid color.$base;
        color: color.$base;
        border-radius: fn.rpx(10);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .frame {
      margin-top: fn.rpx(30);
      box-sizing: border-box;
      padding: fn.rpx(30) fn.rpx(40) fn.rpx(50) fn.rpx(10);
      width: fn.rpx(630);

      background: #ffffff;
      border: fn.rpx(1) solid #eeeeee;
      border-radius: fn.rpx(8);

      .company {
        margin-left: fn.rpx(20);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .item {
          margin-top: fn.rpx(20);
          display: flex;
          width: 100%;

          .text {
            white-space: nowrap;
            // width: fn.rpx(200);
            font-size: fn.rpx(16);
            font-weight: 500;
            color: #999999;
            line-height: fn.rpx(30);
          }

          .value {
            width: fn.rpx(400);
            font-size: fn.rpx(16);

            font-weight: 500;
            color: color.$base;
            line-height: fn.rpx(30);
          }
        }
      }

      .btn {
        display: flex;
        justify-content: center;

        .submit {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: fn.rpx(23);
          width: fn.rpx(230);
          height: fn.rpx(48);
          background: color.$base;
          border-radius: fn.rpx(6);
          color: #fff;

          &:active {
            background: rgba(210, 217, 236, 0.878);
          }
        }
      }
    }

    .notice-box {
      margin-top: fn.rpx(30);

      .item {
        position: relative;
        padding-top: fn.rpx(20);
        padding-bottom: fn.rpx(20);
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;

          .block {
            margin-top: fn.rpx(4);

            width: fn.rpx(9);
            height: fn.rpx(9);
            background: #eb7803;
          }

          .text {
            margin-left: fn.rpx(10);
            display: flex;
            flex-direction: column;

            .title {
              @include fn.title();
              width: fn.rpx(460);
              height: fn.rpx(24);
              line-height: fn.rpx(24);
            }

            .date {
              margin-top: fn.rpx(6);
              @include fn.describe();
            }
          }
        }

        .right {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: fn.rpx(90);
          height: fn.rpx(35);
          background: #f6f6f6;
          border-radius: fn.rpx(6);
          font-size: fn.rpx(14);

          font-weight: 400;
          color: #666666;
        }

        .line {
          position: absolute;
          bottom: 0;
          width: 100%;

          border: fn.rpx(1) dashed #efefef;
        }
      }
    }

    .report-box {
      margin-top: fn.rpx(30);

      .list {
        width: 100%;
        margin-top: fn.rpx(27);
        padding-bottom: fn.rpx(27);
        display: flex;
        // gap: fn.rpx(40);
        flex-wrap: wrap;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: fn.rpx(290);
          margin: fn.rpx(12);

          .img {
            width: fn.rpx(290);
            height: fn.rpx(388);
          }

          .title {
            @include fn.title();
            margin-top: fn.rpx(18);
            line-height: fn.rpx(18);
          }
        }
      }
    }
  }
}
</style>